<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人主页相册</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 引入字体 -->
    <script th:src="@{/js/libs/webfontloader.min.js}"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>
    <!-- 引入bootstrap css -->
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
    <!-- 引入主要 css -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/fonts.min.css}">
</head>
<body class="page-has-left-panels">
<!-- Preloader 预加载 -->
<div id="hellopreloader">
    <div class="preloader">
        <svg width="45" height="45" stroke="#fff">
            <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="8">
                    <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                             values="6;1;2;3;4;5;6"/>
                </circle>
            </g>
        </svg>
        <div class="text">Loading ...</div>
    </div>
</div>
<!-- ... end Preloader 结束预加载-->

<!-- Fixed Sidebar Left 左侧菜单 -->
<div th:replace="common/sidebar_left :: sidebar"></div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->

<!-- Header-BP 头部导航栏-->
<div th:replace="common/headNav :: headNav"></div>
<!-- ... end Header-BP 结束头部导航栏-->
<!--头部空间-->
<div class="header-spacer"></div>
<!--end头部空间-->

<!-- Top Header-Profile 个人主页头部-->
<div th:replace="common/headerProfile :: headerProfile"></div>
<!-- ... end Top Header-Profile 结束个人主页头部-->

<!--个人主页相册主体头部-->
<div class="container">
    <div class="row">
        <div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="ui-block responsive-flex">
                <div class="ui-block-title">
                    <div class="h6 title">相册</div>
                    <!-- 引用插件：https://github.com/kartik-v/bootstrap-fileinput/-->
                    <!--事件：上传照片-->
<!--                    <form class="block-btn align-right">-->
<!--                        <input type="file" class="btn btn-primary ">-->
<!--                    </form>-->
                    <form class="block-btn align-right" action="/makefriend/photo/fileupload"
                          th:action="@{/photo/fileupload}" method="post" enctype="multipart/form-data">
                        <input type="file" name="upload" multiple="multiple" class="btn btn-primary "/>
                        <input type="submit" value="上传文件"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--结束个人主页相册主体头部-->

<!--个人主页-相册列表-->
<div class="container">
    <div class="row">
        <div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="photo-page" role="tabpanel">
                    <!--照片墙-->
                    <div class="photo-album-wrapper">
                        <div class="photo-item col-4-width" th:each="photo : ${photos}">
                            <!--数据：照片地址-->
                            <img th:src="@{'/uploads/'+${photo.photoName}}" alt="photo">
                            <div class="overlay overlay-dark"></div>
                            <!--数据：照片获赞-->
                            <!--可能事件：点赞-->
                            <a href="10-PublishDetail.html" class="post-add-icon inline-items">
                                <svg class="olymp-heart-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-heart-icon"
                                    th:href="@{/svg-icons/sprites/icons.svg#olymp-heart-icon}"></use>
                                </svg>
                                <span th:text="${photo.likeNum}">15</span>
                            </a>
                        </div>
                        <!--单张照片-->
                        <div class="photo-item col-4-width">
                            <!--数据：照片地址-->
                            <img th:src="@{/img/photo-item2.jpg}" alt="photo">
                            <div class="overlay overlay-dark"></div>
                            <!--数据：照片获赞-->
                            <!--可能事件：点赞-->
                            <a href="10-PublishDetail.html" class="post-add-icon inline-items">
                                <svg class="olymp-heart-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-heart-icon"
                                         th:href="@{/svg-icons/sprites/icons.svg#olymp-heart-icon}"></use>
                                </svg>
                                <span>15</span>
                            </a>
                        </div>
                        <!--结束单张照片-->

                        <!--事件：处理展开-->
                        <a href="#" class="btn btn-control btn-more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-three-dots-icon"
                                th:href="@{/svg-icons/sprites/icons.svg#olymp-three-dots-icon}"></use>
                            </svg>
                        </a>
                        <!--事件：处理展开-->
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--结束个人主页-相册列表-->

<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img th:src="@{/svg-icons/back-to-top.svg}" alt="arrow" class="back-icon">
</a>

<!-- JS Scripts -->
<script th:src="@{/js/jQuery/jquery-3.4.1.js}"></script>
<script th:src="@{/js/libs/jquery.appear.js}"></script>
<script th:src="@{/js/libs/jquery.mousewheel.js}"></script>
<script th:src="@{/js/libs/perfect-scrollbar.js}"></script>
<script th:src="@{/js/libs/jquery.matchHeight.js}"></script>
<script th:src="@{/js/libs/svgxuse.js}"></script>
<script th:src="@{/js/libs/imagesloaded.pkgd.js}"></script>
<script th:src="@{/js/libs/Headroom.js}"></script>
<script th:src="@{/js/libs/velocity.js}"></script>
<script th:src="@{/js/libs/ScrollMagic.js}"></script>
<script th:src="@{/js/libs/jquery.waypoints.js}"></script>
<script th:src="@{/js/libs/jquery.countTo.js}"></script>
<script th:src="@{/js/libs/popper.min.js}"></script>
<script th:src="@{/js/libs/material.min.js}"></script>
<script th:src="@{/js/libs/bootstrap-select.js}"></script>
<script th:src="@{/js/libs/smooth-scroll.js}"></script>
<script th:src="@{/js/libs/selectize.js}"></script>
<script th:src="@{/js/libs/swiper.jquery.js}"></script>
<script th:src="@{/js/libs/isotope.pkgd.js}"></script>
<script th:src="@{/js/libs/ajax-pagination.js}"></script>
<script th:src="@{/js/libs/circle-progress.js}"></script>
<script th:src="@{/js/libs/loader.js}"></script>
<script th:src="@{/js/libs/run-chart.js}"></script>
<script th:src="@{/js/libs/jquery.magnific-popup.js}"></script>
<script th:src="@{/js/libs/ion.rangeSlider.js}"></script>

<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/libs-init/libs-init.js}"></script>
<script defer th:src="@{/fonts/fontawesome-all.js}"></script>

<script th:src="@{/Bootstrap/dist/js/bootstrap.bundle.js}"></script>

</body>

</html>